<template>
    <div id="box">
        <div>
            <a @click='$router.go(-1)'><van-icon name="arrow-left" /></a>
            <span>登录</span>
        </div>
        <nav class="inp">
            <span>Accesstoken</span>
            <input v-model='val' type="text">
        </nav>
        <nav class="sub">
            <button @click='login'>登录</button>
        </nav>
    </div>
</template>

<script>
export default {
    data(){
        return {
            val:'f27be2e8-623d-4530-bba2-77dbdb9f7303'
        }
    },
    methods:{
        login(){
            if(this.val == ''){
                return false
            }
            this.axios.post('https://cnodejs.org/api/v1/accesstoken',{
                accesstoken:this.val
            }).then(res=>{
                let obj = res.data
                obj.acc = this.val;
                console.log(window.localStorage.getItem("user"))
                window.localStorage.setItem('user',JSON.stringify(obj))
                this.$router.push({name:'homeLogin'})
            })
        }
    }
}
</script>

<style lang="scss" scoped>
#box{
    height:100vh;
    background:#eeee;
    width: 100%;
    >div{
        height:.6rem;
        font-size: .2rem;
        background-image: linear-gradient(to right top , #7A88FF, #7AFFAF);
        position: relative;
        >a{
            position: absolute;
            font-size:.24rem;
            color: #ffff;
            left:.02rem;
            bottom: .04rem;
        }
        >span{
            font-size: .18rem;
            position: absolute;
            bottom:0.1rem;
            left:50%;
            transform: translateX(-50%);
            color:white;
        }
    }
}
.inp{
    width:100%;
    height:.4rem;
    box-sizing: border-box;
    padding:0px .1rem;
    background:white;
    display: flex;
    line-height:.4rem;
    >span{
        user-select: none;
        font-size:.14rem;padding:0px .08rem;
    }
    >input{
        height:.25rem;
        margin:auto 0px;
        width:100%;
        font-size:.14rem;
        border:none;
        background:transparent;
        outline:none;
    }
}
.sub{
    margin:.16rem 0px;
    width:100%;
    height:.3rem;
    box-sizing: border-box;
    padding:0px .16rem;
    display: flex;
    >button{
        flex-grow: 1;
        font-size:.16rem;
        border:none;
        outline:none;
        color:white;
        border-radius:.05rem;
        text-align: center;
        background-image: linear-gradient(-225deg, #9EFBD3 0%, #57E9F2 48%, #45D4FB 100%);
    }
}
</style>